import Modify from './components/modify'
import Search from './components/search'
import TableCategory from './components/tableCategory'
import {observer} from 'mobx-react'
import React, {useState, useEffect} from 'react'
import http from '../../../utils/http'
import Loading from '../../loading/loading'
import './CategoryList.less'

const CategoryList = (props) => {

    const [isModalVisible, setIsModalVisible] = useState(false)
    const [title, settitle] = useState('添加一级分类')
    const [operat, setoperat] = useState(2)
    const [record, setrecord] = useState({})
    const [data, setData] = useState([])
    const [isLoading, setIsLoading] = useState(true)

    // 获取分类数据
    const getData = () => {
        // console.log(setData)
        http({
            url: '/huangyi/getClassify',
            method: 'get'
        }).then(res => {
            console.log(res)
            if (res.data1) setIsLoading(false)
            res?.data1?.forEach(v1 => {
                v1.add = true
                v1.classify = 1
                res?.data2?.forEach(v2 => {
                    v2.add = false
                    v2.classify = 2
                    if (v2.goods_classify_id === v1.id) {
                        if (v1.children) {
                            v1.children.push(v2)
                        } else {
                            v1.children = []
                            v1.children.push(v2)
                        }

                    }
                })
            })
            console.log(res.data1)
            setData(res.data1)
        })
    }

    // 打开模态框
    const openModal = (visible, operat, title, record) => {
        setIsModalVisible(visible)
        setoperat(operat)
        settitle(title)
        record && setrecord(record)
    }

    // 获取搜索框的值
    const ongetSearch = (value) => {
        console.log(value)
        http({
            url: '/huangyi/searchClassify',
            method: 'get',
            data: {
                name: value
            }
        }).then(res => {
            console.log(res)
            if (res.data1) setIsLoading(false)
            res?.data1?.forEach(v1 => {
                v1.add = true
                v1.classify = 1
                res?.data2?.forEach(v2 => {
                    v2.add = false
                    v2.classify = 2
                    if (v2.goods_classify_id === v1.id) {
                        if (v1.children) {
                            v1.children.push(v2)
                        } else {
                            v1.children = []
                            v1.children.push(v2)
                        }

                    }
                })
            })
            console.log(res.data1)
            setData(res.data1)
        })
    }

    // 调用获取数据
    useEffect(() => {
        getData()
    }, [])

    // 渲染函数
    const renderFn = () => {
        if (isLoading) {
            return (<Loading ></Loading>)
        }
        return (
            <div className="categoryList">
                <Search openModal={openModal} ongetSearch={ongetSearch} {...props} ></Search>
                <TableCategory data={data} openModal={openModal} getData={getData}></TableCategory>
                <Modify
                    operat={operat}
                    getData={getData}
                    isModalVisible={isModalVisible}
                    setIsModalVisible={setIsModalVisible}
                    title={title}
                    record={record}
                    data={data}
                ></Modify>
            </div>
        )
    }

    return (
        <div className="big-card">
            <div className="card-header">
                <h2>分类列表</h2>
            </div>
            {renderFn()}
        </div>
    )
}

export default observer(CategoryList)